<template>
  <div class="tpl-container">
    <div class="mb20">
      <span class="color_494949 ft12 pr5">{{ translate('电话号码') }}：</span>
      <ElInput
        v-model="eslCode"
        class="w164 mr14"
        :placeholder="translate('请输入电话号码')"
      />
      <ElButton class="settingBtn" type="primary" @click="search">
        {{ translate('查询') }}
      </ElButton>
    </div>
    <div class="table">
      <ElTable v-loading="loading" :border="true" :data="tableData">
        <ElTableColumn
          :label="translate('公司名称')"
          prop="com_name"
          width="auto"
        />
        <ElTableColumn
          :label="translate('业务名称')"
          prop="busin_name"
          width="auto"
        />
        <ElTableColumn
          :label="translate('业务ID')"
          prop="busin_id"
          width="auto"
        />
        <ElTableColumn
          :label="translate('昵称')"
          prop="nickname"
          width="auto"
        />
        <ElTableColumn :label="translate('电话号码')" prop="tel" width="auto" />
        <ElTableColumn :label="translate('地址')" prop="address" width="auto" />
        <ElTableColumn
          :label="translate('申请时间')"
          prop="createDate"
          width="auto"
        />
        <ElTableColumn align="center" :label="translate('状态')" width="auto">
          <template #default="{ row }">
            <div>
              {{
                !row.auditstatus
                  ? '待审核'
                  : row.auditstatus === 2
                  ? '已驳回'
                  : '已确认'
              }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn :label="translate('操作')" width="200">
          <template #default="{ row }">
            <ElButton
              v-if="row.auditstatus"
              link
              type="primary"
              @click="addFn(row)"
            >
              {{ translate('设置成分账人') }}
            </ElButton>
            <ElButton
              v-if="!row.auditstatus"
              link
              type="primary"
              @click="refundFn(row)"
            >
              {{ translate('审核') }}
            </ElButton>
            <ElButton link type="danger" @click="delFn(row)">
              {{ translate('删除') }}
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="searchInfo.pageNo"
          :layout="layout"
          :page-size="searchInfo.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { MenuAuth } from '~/src/utils/permission'
  import {
    augentgetpagedata,
    audituagent,
    addprofituser,
    delprofituser,
  } from '@/api/mupro'
  import router from '@/router'
  import { useEleStore } from '@/store/modules/coms'
  import { translate } from '@/i18n'
  const eslCode = ref('')
  const eslName = ref('')
  const lcdType = ref('')
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"tel","value":${eslCode.value},"displayType":"like"}]`,
    export: false,
    value: '',
  })
  const loading = ref(false)
  const { clearWidgets, clearEditorData } = useEleStore()
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    const { data } = await augentgetpagedata(searchInfo)
    loading.value = false
    tableData.value = data?.rows || []
    total.value = data?.total || 0
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  const refundFn = async (val: any) => {
    ElMessageBox.confirm('你确认该商户成为代理商吗', '提示', {
      confirmButtonText: '通过',
      cancelButtonText: '驳回',
    })
      .then((res) => {
        console.log(res)
        audituagentConfim(val, 1)
      })
      .catch((res) => {
        audituagentConfim(val, 2)
        console.log(res)
      })
  }
  const addFn = async (val: any) => {
    ElMessageBox.confirm('添加该商户成为分账人，可进行分销分账？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    })
      .then((res) => {
        console.log(res)
        addprofituserFn(val)
      })
      .catch((res) => {
        console.log(res)
      })
  }
  const delFn = async (val: any) => {
    ElMessageBox.confirm('删除分账人后，该商户不能进行分销分账', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    })
      .then((res) => {
        console.log(res)
        delprofituserFn(val)
      })
      .catch((res) => {
        console.log(res)
      })
  }
  const delprofituserFn = async (val: any) => {
    const params = {
      account: val.openid,
    }
    const data = await delprofituser(params)
    if (data.code === '200') {
      ElMessage.success('删除成功')
      gettableData()
    } else {
      ElMessage.error('删除失败')
    }
  }
  const addprofituserFn = async (val: any) => {
    const params = {
      account: val.openid,
    }
    const data = await addprofituser(params)
    if (data.code === '200') {
      ElMessage.success('添加成功')
      gettableData()
    } else {
      ElMessage.error('添加失败')
    }
  }
  const audituagentConfim = async (val: any, status: any) => {
    const params = {
      id: val.id,
      auditstatus: status,
    }
    const data = await audituagent(params)
    if (data.code === '200') {
      ElMessage.success('操作成功')
      gettableData()
    }
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }

  const search = () => {
    searchInfo.pageNo = 1
    if (
      eslCode.value.trim() !== '' ||
      eslName.value.trim() !== '' ||
      lcdType.value.trim() !== ''
    ) {
      const arr = []
      eslCode.value.trim() !== '' &&
        arr.push({
          name: 'tel',
          value: eslCode.value,
          displayType: 'like',
        })
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"tel","value": '',"displayType":"like"}]`
    }
    gettableData()
  }
  const $baseConfirm = inject('$baseConfirm') as any
  const deleteFn = async (row: any) => {
    $baseConfirm(translate('你确定要删除当前项吗'), null, async () => {
      await delCstemp({
        id: row.ID,
      })
      gettableData()
    })
  }
</script>

<style lang="scss" scoped>
  .tpl-container {
    .color_494949 {
      color: #494949;
    }

    .noData {
      text-align: center;
      font-size: 16px;
      color: gray;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr14 {
      margin-right: 14px;
    }

    .img-container {
      display: flex;
      // justify-content: center;

      .img {
        width: 100px;
      }
    }
  }
  .tpl-container .switch {
    min-width: 170px !important;
  }
  .inline-block {
    display: inline-block;
  }
  .ft12 {
    font-size: 12px;
  }
  .ml10 {
    margin-left: 10px;
  }
  .h-50 {
    vertical-align: top;
  }
  .el-table {
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>
